<script lang="ts" setup>
import { ref } from 'vue'

</script>

<template>
  <div class="userinfo">
    <div class="left">
      <div class="picture">
        <img
          src="https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif?imageView2/1/w/80/h/80"
          alt="加载失败">
      </div>
      <div class="comment">
        <div class="title">晚上好，系统管理员</div>
        <div class="subtitle">今日天气晴朗，气温在15°C至25°C之间，东南风。</div>
      </div>
    </div>
    <div class="right">
      <div class="box">
        <div class="message">
          <el-icon color="pink" size="22">
            <ChatLineSquare />
          </el-icon>
          <span>消息</span>
        </div>
        <div class="number">
          99
        </div>
      </div>
      <div class="box">
        <div class="message">
          <el-icon color="#7ae218" size="22">
            <Notebook />
          </el-icon>
          <span>代办</span>
        </div>
        <div class="number">
          50/100
        </div>
      </div>
      <div class="box">
        <div class="message">
          <el-icon color="#4d90db" size="22">
            <Handbag />
          </el-icon>
          <span>项目</span>
        </div>
        <div class="number">
          10
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.userinfo{
  width: 100%;
  height: 120px;
  background-color: #fff;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px 20px 20px ;
  border-radius: 10px;
  .left{
    display: flex;
    align-items: center;
    gap: 20px;
    .picture{
      width: 80px;
      height: 80px;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .comment{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 80px;
      padding: 10px 0;
      .subtitle{
        color: rgb(156 163 175);
      }
    }
  }
  .right{
    display: flex;
    gap: 50px;
    .box{
      display: flex;
      flex-direction: column;
      gap: 10px;
      .message{
        display: flex;
        align-items: center;
        gap:0 5px;
      }
    }
  }
}
</style>